---
slug: redux中间件 #路径，不能重复
title: redux中间件 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---
> 在`dispatch`到`reducer`之间做一些操作

* redux-logger
   > 每一次派发在控制台输出派发日志，方便对redux的操作进行调试(输出的内容:派发之前的状态;派发的行为;派发之后的状态)
* redux-thunk/redux-promise
   > 实现异步派发(每一次派发的时候,需要传递给reducer的action对象的内容,是需要异步获取的)

### redux使用中间件
```js
import {createStore,applyMiddleware} from 'redux';
import reducer from './reducer';
//applyMiddleware内部传入中间件
const store = createStore(reducer,applyMiddleware());
```

## redux-logger

> 会在每次派发时候打印日志在控制台

```shell
npm install redux-logger
```

### 使用

`src/store/index.js`

```js
import {createStore,applyMiddleware} from 'redux';
import reduxLogger from 'redux-logger';
import combinedReducers from './reducer';
const store = createStore(combinedReducers,applyMiddleware(reduxLogger));

export default store;
```

## redux-thunk

`npm install redux-thunk`

* 在版本号< `3.0.0`时候是默认导出
  `import reduxThunk from 'redux-thunk'`
* 新版本是命名导出
    `import {thunk} from redux-thunk`

> 此中间件只在封装action需要异步请求时候需要，直接返回函数的不需要

### 1. connect直接第二个参数返回函数的：



### 使用

假设我想在action的时候执行些网络请求，得到网络请求的结果后再执行,原本的在action.js里面直接await是不行的,必须要用redux-thunk

`src/store/index.js`

```js
import {createStore,applyMiddleware} from 'redux';
import reduxLogger from 'redux-logger';
import {thunk} from 'redux-thunk';
import combinedReducers from './reducer';
const store = createStore(combinedReducers,applyMiddleware(reduxLogger,thunk));

export default store;
```

`src/store/action/vote-action.js`

```js
import * as Types from '../action-types';
const wait = () => new Promise(resolve => setTimeout(resolve, 1000));
/**
 * vote派发行为对象管理
 * @type {{vote_up(): {type: string}, vote_down(): {type: string}}}
 */
export const VoteAction = {
      vote_up(){
        return async dispatch=> {
            await wait();
            dispatch({type:Types.VOTE_UP})
        }
    },
    async vote_down(){
        await wait();//这样是不行的，会报错，因为派发的是个Promise
        return {
            type:Types.VOTE_DOWN
        }
    }
}

export default VoteAction;
```

## redux-promise
> 跟redux-thunk一样，但是写法比redux-thunk爽

`npm intall redux-promise`

`src/store/index.js`

```js
import {createStore,applyMiddleware} from 'redux';
import reduxLogger from 'redux-logger';
import {thunk} from 'redux-thunk';
import reduxPromise from 'redux-promise';
import combinedReducers from './reducer';
const store = createStore(combinedReducers,applyMiddleware(reduxLogger,thunk,reduxPromise));

export default store;
```

`src/store/action/vote-action.js`

```js
import * as Types from '../action-types';
const wait = () => new Promise(resolve => setTimeout(resolve, 1000));
/**
 * vote派发行为对象管理
 * @type {{vote_up(): {type: string}, vote_down(): {type: string}}}
 */
export const VoteAction = {
      vote_up(){ //redux-thunk的写法
        return async dispatch=> {
            await wait();
            dispatch({type:Types.VOTE_UP})
        }
    },
    async vote_down(){//redux-promise的写法
          await wait();
        return {
            type:Types.VOTE_DOWN
        }
    }
}

export default VoteAction;
```